<!--
 * @Description  : 首页
 * @Author       : YiDing Xue
 * @Date         : 2023-02-23
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-03-10
-->

<template>
  <AppPage headerTitle="选择签证地" class="bg-[#f8f8f8]" article-class="" header-class="bg-[#3d8ffd] ">
    <template #center><span class="c-white text-14">SOMYTRIP 办签</span></template>
    <div class="pb-66">
      <div class="bg-theme px-15 pb-20">
        <div class="search-container" @click="toSearchCOuntry">
          <nut-searchbar v-model="countryName" placeholder="请输入目的地">
            <template #leftin>
              <Search2 />
            </template>
            <template #rightout>
              <div class="flex items-center">
                <Notice color="white" />
              </div>
            </template>
          </nut-searchbar>
        </div>
        <div class="flex items-center">
          <div class="text-14 c-white mr-10">热搜国家</div>
          <div class="py-1 px-10 c-white text-14 rounded-20 btn-bg-color mr8" v-for="(item,index) in countryList" :key="index" @click="toVisaList(item.name)">{{item.name}}</div>
        </div>
      </div>
      <div class="relative px-15 top--1 flex pb-12">
        <div class="bg-theme border-theme-color h-80 absolute top-0 left-0 z-1 w-full">
        </div>
        <img class="page-home rounded-8 relative z-11" src="@/assets/images/page-home.png" alt="">
      </div>
      <div class="bg-white px-15">
        <nut-tabs v-model="selectedState" color="#3d8ffd" background="#fff" swipeable auto-height>
          <nut-tab-pane title="热门" pane-key="-1">
            <countryLists :countryList="hotCountry" :selectedState="selectedState" @goSelectVisa="goSelectVisa" />
          </nut-tab-pane>
          <nut-tab-pane title="亚洲" pane-key="0">
            <countryLists :countryList="asianCountry" :selectedState="selectedState" @goSelectVisa="goSelectVisa" />
          </nut-tab-pane>
          <nut-tab-pane title="欧洲" pane-key="1">
            <countryLists :countryList="europeCountry" :selectedState="selectedState" @goSelectVisa="goSelectVisa" />
          </nut-tab-pane>
          <nut-tab-pane title="美洲" pane-key="2">
            <countryLists :countryList="americaCountry" :selectedState="selectedState" @goSelectVisa="goSelectVisa" />
          </nut-tab-pane>
          <nut-tab-pane title="大洋洲" pane-key="3">
            <countryLists :countryList="oceaniaCountry" :selectedState="selectedState" @goSelectVisa="goSelectVisa" />
          </nut-tab-pane>
          <nut-tab-pane title="非洲" pane-key="4">
            <countryLists :countryList="africaCountry" :selectedState="selectedState" @goSelectVisa="goSelectVisa" />
          </nut-tab-pane>
        </nut-tabs>
      </div>
    </div>
  </AppPage>
  <tabBar :activeIndex="0" />
</template>

<script setup>
import { onMounted } from 'vue'
import { getVisaCountryList } from '@/api/visa'
import { useVisaStore } from '@/store/modules/visa/index.js'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Notice, Search2 } from '@nutui/icons-vue';
import countryLists from './visa/components/countryList.vue'
import { lStorage } from '@/utils'
import tabBar from '@/components/tabBar/tabBar.vue'
const router = useRouter()
onMounted(() => {
  getVisaCountryListFun()
})
const countryList = ref([
  { name: '美国', id: 1 },
  { name: '马来西亚', id: 2 },
  { name: '日本', id: 3 },
  { name: '越南', id: 4 },
])
let countrySetList = []
let selectedState = ref(-1)
let countryName = ref('')
let hotCountry = ref([])
let asianCountry = ref([])
let europeCountry = ref([])
let americaCountry = ref([])
let oceaniaCountry = ref([])
let africaCountry = ref([])
let addr_json_url
const getVisaCountryListFun = async () => {
  const { code, data } = await getVisaCountryList()
  if (+code !== 200) return
  const city_set = data.city_set
  console.log('%c [ city_set ]-97', 'font-size:13px; background:#4823c0; color:#8c67ff;', city_set)
  countrySetList = data.country_set
  hotCountry.value = data.country_set.slice(0, 10)
  const country_set = data.country_set
  window.sessionStorage.setItem('setCountryList', JSON.stringify(country_set))
  window.sessionStorage.setItem('city_set', JSON.stringify(city_set))
  useVisaStore().setCountryList(country_set)
  useVisaStore().setCityList(city_set)
  if (country_set && country_set.length) {
    country_set.forEach((value, index, array) => {
      if (value.continent_id === 0) {
        asianCountry.value.push(value)
      } else if (value.continent_id === 1) {
        europeCountry.value.push(value)
      } else if (value.continent_id === 2) {
        americaCountry.value.push(value)
      } else if (value.continent_id === 3) {
        oceaniaCountry.value.push(value)
      } else if (value.continent_id === 4) {
        africaCountry.value.push(value)
      }
    })
  }

  addr_json_url = data.addr_json_url
}
const goSelectVisa = async (item) => {
  router.push({ path: '/visaList', query: { country_name: item.country_name, addr_json_url: addr_json_url } })
}
const toSearchCOuntry = async () => {
  router.push({ path: '/searchCountry', query: { addr_json_url: addr_json_url } })
}
const toVisaList = async (name) => {
  countrySetList.forEach(val => {
    if (name == val.country_name) {
      router.push({ path: '/visaList', query: { country_name: val.country_name, addr_json_url: addr_json_url } })
    }
  })
}

</script>
<style>
:root {
  --nut-grid-item-text-color: black;
  --nut-grid-item-text-font-size: 14px;
}
.input {
  width: 220px;
}
</style>
<style lang="scss" scoped>
.city {
  line-height: 32px;
  border: 1px solid #ddd;
}
.city.active {
  line-height: 32px;
  border: 1px solid #f00;
}
</style>
<style scoped>
.search-container .nut-searchbar {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.search-container .nut-searchbar__right-search-icon,
.nut-searchbar__right-search-icon {
  margin-left: 10px !important;
}
.btn-bg-color {
  background-color: #579dfd;
}
.page-home {
  width: 100%;
}
</style>